<template>
  <div class="post-card">
    <ul class="post-content">
      <li class="flex-left">
        <img :src="postImg" alt="" @click="goEditPost(postInfo)" />
        <span class="backgrounk-video" v-if="postInfo.postType == 2">
          <img src="https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/playicon_video.png" alt="" />
          00：00
        </span>
      </li>
      <li class="flex-mid">
        <h5 @click="goEditPost(postInfo)">{{ postInfo.title }}</h5>
        <p class="twoLineOverflow">{{ clauseMsg }}</p>
      </li>
      <li class="flex-right">
        <p>{{ postInfo.updateTime | formatTime('MM-DD H:mm') }}</p>
        <div class="bottom-btn">
          <span style="margin-right:28px" @click="goEditPost(postInfo)">编辑</span>
          <span @click="deletePost">删除</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import clause from '../clause';
import { deletePost } from '../api';

export default {
  props: {
    postInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      clauseMsg: ''
    };
  },
  computed: {
    postImg() {
      if (this.postInfo.coverImg && this.postInfo.coverImg.length > 0) {
        return this.postInfo.coverImg[0];
      } else {
        return 'https://mokr.oss-cn-hangzhou.aliyuncs.com/custom/article_cover_empty.svg';
      }
    }
  },
  created() {
    let random = Math.ceil(Math.random() * 10);
    this.clauseMsg = clause[random];
  },
  methods: {
    goEditPost(data) {
      if (data.postType == 1) {
        this.$router.push({
          name: 'uploadArticle',
          query: { postId: data.postId }
        });
      } else {
        this.$router.push({
          name: 'uploadVideo',
          query: { postId: data.postId }
        });
      }
    },
    deletePost() {
      this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletePost({ postId: this.postInfo.postId }).then(res => {
            if (res.success) {
              this.$emit('deleteSucc');
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          });
        })
        .catch(err => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.post-card {
  padding: 18px 0;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  .post-content {
    display: flex;
    height: 80px;
    .flex-left {
      flex: 0 0 160px;
      position: relative;
      img {
        width: 128px;
        height: 80px;
        object-fit: cover;
        border-radius: 3px;
        transition: transform 0.5s ease-out 0.1s;
        cursor: pointer;
      }
      img:hover {
        transform: scale(1.1);
      }
      .backgrounk-video {
        padding: 0 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 40px;
        bottom: 4px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 12px;
        line-height: 20px;
        border-radius: 10px;
        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
        }
      }
    }
    .flex-mid {
      flex: 1;
      h5 {
        font-size: 17px;
        color: #333;
        font-weight: 700;
        cursor: pointer;
      }
      p {
        font-size: 16px;
        color: #666;
        margin-top: 6px;
        line-height: 28px;
        padding-right: 28px;
      }
    }
    .flex-right {
      flex: 0 0 180px;
      font-size: 15px;
      color: #999;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .bottom-btn {
        font-size: 14px;
        color: #333;
        span {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
